<template>
  <div>
    <!-- 头部 -->
    <div class="header flex align-center justify-between">
      <div class="flex align-center">
        <i class="iconfont color-main">&#xe676;</i>
        <span class="color-main fs-24">重庆</span>
      </div>
      <img
        class="logo"
        src="http://img.maixiaobu.cn/kissmilan/fixed/20170718/a7aecada618904f2.png"
        alt=""
      />
      <van-icon
        name="shopping-cart"
        color="#a36663"
        size="22"
        @click="handleCartAdd"
      />
    </div>

    <!-- 轮播部分 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#fff">
      <van-swipe-item
        v-for="(itm, ind) in data.bannerList"
        :key="ind"
        @click="handleDetail(itm.id)"
        ><img :src="itm.cover.pc_cover" alt=""
      /></van-swipe-item>
    </van-swipe>

    <!-- 商品列表 -->
    <div
      class="goods"
      v-for="(item, index) in data.list"
      :key="index"
      @click="handleChange(item.id, index + 1)"
    >
      <img :src="item.pic" alt="" />
    </div>

    <!-- 公司简介 -->
    <div class="introduce text-center color-main fs-24">
      <p>客服中心：4001-023-866</p>
      <p>重庆市江北区北滨一路456号S1栋四层商业3号商铺</p>
      <p>渝ICP备13001878号-3</p>
      <p>COPYRIGHT©2013-2022 Kissmilan 版权所有</p>
      <p>技术支持：迈小步科技</p>
    </div>
    <!-- 底部 -->
    <TabBar></TabBar>
  </div>
</template>

<script setup>
import { onMounted, reactive, computed } from "vue";
import { homeList, bannerList } from "../api/zj_api.js";
import TabBar from "../components/TabBar.vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
let router = useRouter();
let data = reactive({
  list: [], //产品数据包
  bannerList: [],
});

onMounted(() => {
  // 产品系列
  homeList().then((res) => {
    data.list = res.data.data;
  });
  bannerList().then((res) => {
    data.bannerList = res.data.data.data;
  });
});
let handleDetail = (id) => {
  router.push({
    path: "/detail",
    query: { id },
  });
};
let handleChange = (id, idx) => {
  console.log(idx);
  router.push({
    path: "/category",
    query: { id, idx },
  });
};
let handleCartAdd = () => {
  router.push("/cart");
};
</script>

<style lang="less" scoped>
// 头部
.header {
  height: 9.8rem;
  background-color: #fff;
  padding: 0 2.1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 10;
  box-shadow: 0 -2px 10px #ccc;
  .logo {
    width: 23.6rem;
  }
  i {
    font-size: 4rem;
  }
}

// 轮播图
.my-swipe .van-swipe-item {
  margin-top: 9.8rem;

  img {
    height: 100rem;
    width: 100%;
  }
}

// 商品列表
.goods {
  padding-top: 2rem;
  img {
    height: 28rem;
    width: 75rem;
  }
}

// 公司简介
.introduce {
  height: 24.4rem;
  padding: 3.4rem 0 5.4rem 0;
  line-height: 3rem;
}
</style>
